<template>
    <div class="feedback-management">
      <!-- 页面标题区域 -->
      <div class="page-title">
        <div class="title-content">
          <i class="el-icon-message"></i>
          <span>问题反馈管理</span>
        </div>
        <div class="title-right">
          <span class="time">{{ currentTime }}</span>
        </div>
      </div>
  
      <!-- 搜索和筛选区域 -->
      <div class="search-bar">
        <el-select 
          v-model="filterStatus" 
          placeholder="状态筛选" 
          @change="handleFilterChange"
          size="small"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="待处理" value="0"></el-option>
          <el-option label="处理中" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已关闭" value="3"></el-option>
        </el-select>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索反馈内容"
          prefix-icon="el-icon-search"
          @input="handleSearch"
          size="small"
        >
        </el-input>
      </div>
  
      <div class="table-container">
        <el-table
          :data="feedbackList"
          style="width: 100%"
          v-loading="loading"
          border
          stripe
          highlight-current-row
        >
          <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
          <el-table-column prop="userId" label="用户账号" width="120" align="center"></el-table-column>
          <el-table-column prop="problemType" label="问题类型" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getTypeTagType(scope.row.problemType)" effect="dark">
                {{ getProblemTypeName(scope.row.problemType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="summary" label="问题简述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="severity" label="严重程度" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getSeverityTagType(scope.row.severity)" effect="dark">
                {{ getSeverityLabel(scope.row.severity) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" effect="dark">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="提交时间" width="160" align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleView(scope.row)"
                icon="el-icon-view"
              >查看</el-button>
              <el-button
                size="mini"
                type="success"
                @click="handleProcess(scope.row)"
                icon="el-icon-edit"
              >处理</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
  
      <!-- 查看详情对话框 -->
      <el-dialog 
        title="反馈详情" 
        :visible.sync="dialogVisible" 
        width="50%"
        :modal="true"
        :close-on-click-modal="false"
        :append-to-body="true"
        custom-class="feedback-dialog"
        :modal-append-to-body="false"
      >
        <div class="feedback-detail">
          <div class="detail-item">
            <label>问题类型：</label>
            <el-tag :type="getTypeTagType(currentFeedback.problemType)" effect="dark">
              {{ getProblemTypeName(currentFeedback.problemType) }}
            </el-tag>
          </div>
          <div class="detail-item">
            <label>问题简述：</label>
            <span class="detail-content">{{ currentFeedback.summary }}</span>
          </div>
          <div class="detail-item">
            <label>详细描述：</label>
            <div class="detail-description">{{ currentFeedback.description }}</div>
          </div>
          <div class="detail-item">
            <label>严重程度：</label>
            <el-tag :type="getSeverityTagType(currentFeedback.severity)" effect="dark">
              {{ getSeverityLabel(currentFeedback.severity) }}
            </el-tag>
          </div>
          <div class="detail-item">
            <label>联系方式：</label>
            <span class="detail-content">{{ currentFeedback.contact }}</span>
          </div>
          <div class="detail-item">
            <label>状态：</label>
            <el-tag :type="getStatusTagType(currentFeedback.status)" effect="dark">
              {{ getStatusLabel(currentFeedback.status) }}
            </el-tag>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleProcess(currentFeedback)">
            修改状态
          </el-button>
          <el-button type="success" @click="handleReply" v-if="currentFeedback.status !== 2 && currentFeedback.status !== 3">
            回复
          </el-button>
        </div>
      </el-dialog>
      
      <!-- 回复对话框 -->
      <el-dialog 
        title="回复反馈" 
        :visible.sync="replyDialogVisible" 
        width="40%"
        :append-to-body="true"
        custom-class="feedback-dialog"
      >
        <div class="reply-form">
          <el-form :model="replyForm" label-width="80px">
            <el-form-item label="回复内容">
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入回复内容"
                v-model="replyForm.content"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态变更">
              <el-select v-model="replyForm.newStatus" placeholder="请选择反馈新状态">
                <el-option label="待处理" :value="0"></el-option>
                <el-option label="处理中" :value="1"></el-option>
                <el-option label="已完成" :value="2"></el-option>
                <el-option label="已关闭" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply">提交回复</el-button>
        </div>
      </el-dialog>
  
      <!-- 状态变更对话框 -->
      <el-dialog
        title="更改处理状态"
        :visible.sync="statusDialogVisible"
        width="30%"
        :modal="true"
        :close-on-click-modal="false"
        :append-to-body="true"
        custom-class="feedback-dialog"
        :modal-append-to-body="false"
      >
        <div class="status-selection">
          <p>当前状态: {{ currentFeedback.id ? getStatusLabel(currentFeedback.status) : '' }}</p>
          <el-select v-model="tempStatusValue" placeholder="请选择新状态" style="width: 100%">
            <el-option label="待处理" :value="0"></el-option>
            <el-option label="处理中" :value="1"></el-option>
            <el-option label="已完成" :value="2"></el-option>
            <el-option label="已关闭" :value="3"></el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="statusDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmStatusChange">确定</el-button>
        </span>
      </el-dialog>
  
      <!-- 宣传邮件表单 -->
      <el-dialog
        title="发送宣传材料"
        :visible.sync="promotionDialogVisible"
        width="30%"
        :modal="true"
        :close-on-click-modal="false"
        :append-to-body="true"
        custom-class="feedback-dialog"
        :modal-append-to-body="false"
      >
        <div class="promotion-form">
          <p>请输入接收宣传材料的邮箱地址：</p>
          <el-input 
            v-model="promotionEmail" 
            placeholder="请输入邮箱地址"
            clearable
          ></el-input>
          <div class="promotion-description">
            <p>我们将向您提供ETNOR-API接口管理平台的详细介绍和功能说明。</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="promotionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sendPromotionMaterial" :loading="sendingPromotion">发送材料</el-button>
        </span>
      </el-dialog>
  
      <!-- 添加发送宣传邮件的入口按钮 -->
      <div class="promotion-button-container">
        <el-button 
          type="primary" 
          icon="el-icon-s-promotion" 
          @click="showPromotionDialog"
          class="promotion-button"
        >
          发送平台宣传资料
        </el-button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';    
  export default {
    name: 'FeedbackManagement',
    data() {
      return {
        loading: false,
        feedbackList: [],
        filterStatus: '',
        searchKeyword: '',
        currentPage: 1,
        pageSize: 10,
        total: 0,
        dialogVisible: false,
        replyDialogVisible: false,
        statusDialogVisible: false,
        tempStatusValue: undefined,
        currentFeedback: {
          problemType: '',
          summary: '',
          description: '',
          severity: '',
          contact: '',
          status: ''
        },
        replyForm: {
          content: '',
          newStatus: 1
        },
        currentTime: '',
        // 问题类型映射
        problemTypes: {
          1: '设计缺陷',
          2: '系统错误',
          3: '功能建议',
          4: '使用问题',
          5: '申请权限变更'
        },
        // 严重程度映射
        severityLabels: {
          "高": '严重',
          "中": '中等',
          "低": '轻微'
        },
        // 状态映射
        statusLabels: {
          0: '待处理',
          1: '处理中',
          2: '已完成',
          3: '已关闭'
        },
        // 更新问题类型标签样式映射
        typeTagTypes: {
          1: 'warning',   // 设计缺陷
          2: 'danger',    // 系统错误
          3: 'success',   // 功能建议
          4: 'info',      // 使用问题
          5: 'primary'    // 申请权限变更
        },
        promotionDialogVisible: false,
        promotionEmail: '',
        sendingPromotion: false
      }
    },
    methods: {
      updateTime() {
        const now = new Date();
        this.currentTime = now.toLocaleString();
      },
      // 获取反馈列表
      async fetchFeedbackList() {
        this.loading = true;
        try {
          const res = await axios.get('/api/system/feedback/list', {
            params: {
              page: this.currentPage,
              pageSize: this.pageSize,
              status: this.filterStatus || null,
              keyword: this.searchKeyword || null
            }
          });
          
          if (res.data.code === 200) {
            this.feedbackList = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.message || '获取反馈列表失败');
          }
        } catch (error) {
          this.$message.error('获取反馈列表失败');
        }
        this.loading = false;
      },
  
      // 格式化日期
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
  
      // 获取问题类型名称
      getProblemTypeName(type) {
        return this.problemTypes[type] || '未知类型';
      },
  
      // 获取严重程度标签
      getSeverityLabel(severity) {
        return this.severityLabels[severity] || '未知';
      },
  
      // 获取状态标签
      getStatusLabel(status) {
        return this.statusLabels[status] || '未知状态';
      },
  
      // 获取问题类型标签样式
      getTypeTagType(type) {
        return this.typeTagTypes[type] || 'info';
      },
  
      // 获取严重程度标签样式
      getSeverityTagType(severity) {
        const types = {
          "高": 'danger',
          "中": 'warning',
          "低": 'info'
        };
        return types[severity] || 'info';
      },
  
      // 获取状态标签样式
      getStatusTagType(status) {
        const types = {
          0: 'warning',  // 待处理
          1: 'primary',  // 处理中
          2: 'success',  // 已完成
          3: 'info'      // 已关闭
        };
        return types[status] || 'info';
      },
  
      // 处理查看详情
      handleView(row) {
        this.currentFeedback = { ...row };
        this.dialogVisible = true;
      },
  
      // 处理反馈处理
      handleProcess(row) {
        this.currentFeedback = { ...row };
        this.tempStatusValue = row.status;
        this.statusDialogVisible = true;
      },
  
      // 确认状态变更
      confirmStatusChange() {
        if (this.tempStatusValue === undefined) {
          this.$message.warning('请选择状态');
          return;
        }
        this.updateFeedbackStatus(this.currentFeedback.id, this.tempStatusValue);
        this.statusDialogVisible = false;
      },
  
      // 更新反馈状态
      async updateFeedbackStatus(problemId, state) {
        this.loading = true;
        try {
          const res = await axios.post('/api/system/feedback/handle', null, {
            params: {
              state: state,
              problemId: problemId
            }
          });
          
          if (res.data.code === 200) {
            this.$message.success('状态更新成功');
            this.fetchFeedbackList(); // 刷新列表
          } else {
            this.$message.error(res.data.message || '更新状态失败');
          }
        } catch (error) {
          this.$message.error('更新状态失败');
          console.error(error);
        }
        this.loading = false;
      },
  
      // 处理回复
      handleReply() {
        this.replyForm = {
          content: '',
          newStatus: this.currentFeedback.status === 0 ? 1 : this.currentFeedback.status
        };
        this.replyDialogVisible = true;
      },
      
      // 提交回复
      async submitReply() {
        if (!this.replyForm.content.trim()) {
          this.$message.warning('请输入回复内容');
          return;
        }
        
        this.loading = true;
        try {
          // 首先更新状态
          await this.updateFeedbackStatus(this.currentFeedback.id, this.replyForm.newStatus);
          
          // 发送回复内容
          const replyRes = await axios.post('/api/system/feedback/reply', null, {
            params: {
              problemId: this.currentFeedback.id,
              content: this.replyForm.content,
              email: this.currentFeedback.contact // 使用联系方式作为邮箱
            }
          });
          
          if (replyRes.data.code === 200) {
            this.$message.success('回复已发送');
            this.replyDialogVisible = false;
            this.dialogVisible = false;
            this.fetchFeedbackList(); // 刷新列表
          } else {
            this.$message.error(replyRes.data.message || '回复发送失败');
          }
        } catch (error) {
          this.$message.error('回复发送失败');
          console.error(error);
        }
        this.loading = false;
      },
  
      // 分页相关方法
      handleSizeChange(val) {
        this.pageSize = val;
        this.fetchFeedbackList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.fetchFeedbackList();
      },
  
      // 筛选和搜索
      handleFilterChange() {
        this.currentPage = 1;
        this.fetchFeedbackList();
      },
      handleSearch() {
        this.currentPage = 1;
        this.fetchFeedbackList();
      },
  
      // 显示宣传邮件发送对话框
      showPromotionDialog() {
        this.promotionDialogVisible = true;
        this.promotionEmail = '';
      },
      
      // 发送宣传材料
      async sendPromotionMaterial() {
        // 验证邮箱格式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(this.promotionEmail)) {
          this.$message.warning('请输入有效的邮箱地址');
          return;
        }
        
        this.sendingPromotion = true;
        
        try {
          const response = await axios.post('/api/system/promotion/send-material', {
            email: this.promotionEmail
          });
          
          if (response.data.code === 200) {
            this.$message.success('宣传资料已成功发送！');
            this.promotionDialogVisible = false;
          } else {
            this.$message.error(response.data.message || '发送失败，请稍后再试');
          }
        } catch (error) {
          this.$message.error('发送失败：' + (error.response?.data?.message || '网络错误'));
          console.error('发送宣传材料失败:', error);
        } finally {
          this.sendingPromotion = false;
        }
      }
    },
    created() {
      this.fetchFeedbackList();
      this.updateTime();
      setInterval(this.updateTime, 1000);
    }
  }
  </script>
  
  <style>
  /* 注意：这里不使用 scoped，以便样式能够作用到弹窗 */
  .feedback-dialog {
    background: #fff !important;
  }
  
  .feedback-dialog .el-dialog__header {
    background: #1a237e;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin-right: 0;
  }
  
  .feedback-dialog .el-dialog__title {
    color: white;
    font-size: 18px;
    line-height: 24px;
  }
  
  .feedback-dialog .el-dialog__headerbtn {
    top: 15px;
  }
  
  .feedback-dialog .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }
  
  .feedback-dialog .el-dialog__body {
    padding: 30px 20px;
    background: #fff;
  }
  
  .feedback-dialog .el-dialog__footer {
    padding: 15px 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
  }
  
  /* 遮罩层样式 */
  .v-modal {
    opacity: 0.5 !important;
  }
  </style>
  
  <style scoped>
  .feedback-management {
    min-height: 100vh;
    background: #f0f2f5;
    padding: 16px;
  }
  
  .page-title {
    background: #1a237e;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  
  .title-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
  }
  
  .title-content i {
    font-size: 24px;
  }
  
  .title-right {
    font-size: 14px;
    opacity: 0.8;
  }
  
  .search-bar {
    background: white;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  
  .search-bar .el-select {
    width: 120px;
  }
  
  .search-bar .el-input {
    width: 200px;
  }
  
  .table-container {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  
  /* 自定义表格样式 */
  .el-table {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .el-table th {
    background-color: #1a237e !important;
    color: white !important;
    font-weight: 500;
    padding: 12px 0;
  }
  
  .el-table td {
    padding: 12px 0;
  }
  
  /* 分页器样式 */
  .pagination-container {
    display: flex;
    justify-content: center;
    padding-top: 16px;
  }
  
  /* 标签样式 */
  .el-tag {
    border-radius: 4px;
  }
  
  /* 按钮样式 */
  .el-button--mini {
    border-radius: 4px;
  }
  
  /* 响应式设计 */
  @media screen and (max-width: 768px) {
    .search-bar {
      flex-direction: column;
    }
    
    .search-bar .el-select,
    .search-bar .el-input {
      width: 100%;
    }
  }
  
  /* 对话框样式优化 */
  .feedback-detail {
    padding: 0;
  }
  
  .detail-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
  }
  
  .detail-item label {
    width: 100px;
    color: #606266;
    font-weight: 500;
  }
  
  .detail-content {
    flex: 1;
    color: #303133;
  }
  
  .detail-description {
    flex: 1;
    color: #303133;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    min-height: 100px;
    white-space: pre-wrap;
  }
  
  /* 按钮样式优化 */
  .el-button--primary {
    background-color: #1a237e;
    border-color: #1a237e;
  }
  
  .el-button--primary:hover,
  .el-button--primary:focus {
    background-color: #283593;
    border-color: #283593;
  }
  
  /* 标签样式优化 */
  .el-tag {
    border-radius: 4px;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
  }
  
  .status-selection {
    margin-bottom: 20px;
  }
  
  .status-selection .el-select {
    width: 100%;
    margin-top: 10px;
  }
  
  .status-selection p {
    margin-bottom: 10px;
    color: #606266;
  }
  
  .promotion-button-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  
  .promotion-button {
    background-color: #1a237e;
    border-color: #1a237e;
    padding: 10px 20px;
  }
  
  .promotion-button:hover,
  .promotion-button:focus {
    background-color: #283593;
    border-color: #283593;
  }
  
  .promotion-form {
    margin-bottom: 15px;
  }
  
  .promotion-description {
    margin-top: 15px;
    font-size: 14px;
    color: #606266;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
  }
  </style>